<template>
  <div class="classify">
    <header class="home-header">商品分类</header>
    <section class="search-wrap" ref="searchWrap">
      <list-scroll class="nav-side-wrapper">
        <ul class="nav-side">
          <li
            v-for="(item, index) in categoryTypes"
            :key="index"
            :class="{ active: currentIndex === index }"
            @click="selectMenu(index)"
          >
            <span>{{ item.label }}</span>
          </li>
        </ul>
      </list-scroll>
      <list-scroll class="search-content">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="category-list">
              <div
                class="product-item"
                @click="selectProduct(product.skuId)"
                v-for="(product, index) in productList"
                :key="index"
              >
                <img class="item-img" :src="product.image" />
                <p class="product-title">{{ product.name }}</p>
              </div>
            </div>
          </div>
        </div>
      </list-scroll>
    </section>
    <tabbar></tabbar>
  </div>
</template>

<script>
import ListScroll from "@/components/scroll/ListScroll";
import { ref, reactive, onMounted, toRefs, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";

export default {
  name: "classify",
  components: {
    ListScroll,
  },
  setup(props) {
    const app = getCurrentInstance().appContext.app;
    const ctx = app.config.globalProperties;
    const $router = useRouter();

    const searchWrap = ref(null);
    const productList = ref([]);

    const state = reactive({
      categoryDatas: [],
      currentIndex: 0,
    });

    const selectMenu = (index) => {
      state.currentIndex = index;
      getProductList(index + 1);
    };

    const setSearchWrapHeight = () => {
      const { clientHeight } = document.documentElement;
      searchWrap.value.style.height = clientHeight - 100 + "px";
    };

    const selectProduct = (skuId) => {
      $router.push({ path: "/classify/product", query: { skuId } });
    };

    onMounted(async () => {
      setSearchWrapHeight();
      ctx.$eventBus.$emit("changeTag", 1);
      getProductList(1);
    });

    /**
     * 获取商品列表
     */
    const getProductList = (categoryId) => {
      /**
       * 商品列表
       */
      const params = {
        categoryId,
      };
      ctx.$http.post("/s_shop/product/productList", params).then((res) => {
        productList.value = res;
      });
    };

    return {
      searchWrap,
      ...toRefs(state),
      selectProduct,
      selectMenu,
      productList,
      categoryTypes: [
        {
          label: "热门推荐",
          active: true,
        },
        {
          label: "女装",
          active: false,
        },
        {
          label: "手机数码",
          active: false,
        },
        {
          label: "电脑办公",
          active: false,
        },
        {
          label: "超市",
          active: false,
        },
        {
          label: "计生情趣",
          active: false,
        },
        {
          label: "美妆护肤",
          active: false,
        },

        {
          label: "个人清洁",
          active: false,
        },
        {
          label: "汽车生活",
          active: false,
        },
        {
          label: "男装",
          active: false,
        },

        {
          label: "户外运动",
          active: false,
        },
        {
          label: "男装",
          active: false,
        },
        {
          label: "女装",
          active: false,
        },
        {
          label: "超市",
          active: false,
        },
        {
          label: "户外运动",
          active: false,
        },
        {
          label: "其他",
          active: false,
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss" src="./index.scss"></style>
